<template>
	<div id="container">
		<ul>
			<li>
				<h4>平台总运载量(吨)</h4>
				<countTo :endVal="num1" :decimals="4" class="num" :duration="4000" separator=","></countTo>
			</li>
			<li>
				<h4>平台总运费金额(元)</h4>
				<countTo :endVal="num2" :decimals="4" class="num" :duration="4000" separator=","></countTo>
			</li>
			<li>
				<h4>平台司机用户数(人)</h4>
				<countTo :endVal="num3" :decimals="0" class="num" :duration="4000" separator=","></countTo>
			</li>
		</ul>
	</div>
</template>

<script>
	import * as echarts from 'echarts';
	import countTo from 'vue-count-to';
	export default {
		props: {
			chartData: {
				default: () => {
					return {};
				},
			},
		},
		data() {
			return {
				chart: null,
				num1: 12157379.8918,
				num2: 824334563.8299,
				num3: 64985,
				duration: 4000,
			};
		},
		components: { countTo },

		computed: {},
		mounted() {
			this.initChart();
			window.addEventListener('resize', () => {
				// 判断是否存在，直接调用resize方法
				if (this.statusChart) this.statusChart.resize();
			});
		},
		methods: {
			initChart() {
				setInterval(() => {
					this.num1 += 7;
					this.num2 += 7;
					this.num3 += 7;
				}, 30000);
				this.chart = echarts.init(this.$refs['progressChartRef']);
				let option = {
					grid: {
						left: '0', //grid 组件离容器左侧的距离。
						right: '0', //grid 组件离容器右侧的距离。
					},
					xAxis: {
						show: false, //是否显示 x 轴。
						type: 'value', //坐标轴类型。 value  category time log
						min: 0.0, //坐标轴刻度最小值
						max: 999999, //最大值
					},
					yAxis: { data: [] }, //data为所有类目名称列表 例:data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']

					legend: {
						borderColor: '#fff', //边框色
					},
					series: [
						{
							type: 'bar', //type的值取决于你想用什么样的图例
							barWidth: '100%',
							data: [799999], //当前值
							global: false, // 缺省为 false
							itemStyle: {
								normal: {
									color: {
										type: 'linear',
										x: 1,
										y: 0,
										x2: 0,
										y2: 1,
										colorStops: [
											{
												offset: 0,
												color: '#23B3DB', // 0% 处的颜色
											},
											{
												offset: 1,
												color: '#FFF', // 100% 处的颜色
											},
										],
									},
								},
							},
						},
					],
				};
				this.chart.setOption(option);
			},
		},
		beforeDestroy() {},
	};
</script>

<style scoped>
	#container {
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		ul {
			width: 100%;
			height: 100%;
			list-style: none;
			display: flex;
			flex-direction: column;
			align-items: center;
			li {
				width: 100%;
				flex: 4;
				display: flex;
				flex-direction: column;
				justify-content: center;
				h4 {
					font-size: 0.175rem;
					font-weight: 400;
					color: #a3bef1;
					padding-left: 1rem;
				}
				.num {
					padding-left: 1rem;
					font-family: 'LED';
					font-size: 0.4rem;
					letter-spacing: 0.0625rem;
					color: #a3bef1;
				}
			}
		}
	}
</style>
